import React,{useEffect,useState,useRef} from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,Image,
    TouchableWithoutFeedback, TextInput,
} from 'react-native';
import Header from '../../widgets/Header';
import {getffly} from '../../utils/common';
import screen from '../../utils/screen';
import {useStores} from '../../store';
import {observer} from 'mobx-react';
import {LGBtn} from '../../widgets/buttons';
import RequestUtil from '../../utils/RequestUtil';
import Api from '../../utils/Api';
import {AppModal} from '../../widgets/modal';
import Images from '../../images/Images';



export default ({navigation})=>{


    const [data,setData] = useState(null)


    useEffect(()=>{
       getData()
    },[])

    const getData = ()=>{

        AppModal.showLoading();

        RequestUtil.get(Api.faqList).then(res=>{

            let data = res.data
            console.log('faqList',data)
            AppModal.hideTip()

            setData(data.list)
        },error=>{
            AppModal.hideTip()
            if(error.code === -111){
                AppModal.showError(error.msg)
            }else{
                AppModal.showError(error.msg)
            }
            console.log('faq list error',error)
        })

    }

    const renderItem = (item,index)=>{
        let title = `${item.id}.${item.title}`
        return (
            <TouchableWithoutFeedback
                onPress={()=>{
                    navigation.push('GuideDetail',{data:item})
                }}
            >
            <View style={{flexDirection: 'row',justifyContent: 'space-between',width:'100%',alignItems: 'center',
                paddingBottom:screen.PIXEL_30
            }}
                  key={index.toString()}
            >
                <Text style={{fontSize: 17,color:'#137468'}}>{title}</Text>
                <Image source={Images.right}
                       resizeMode={'contain'}
                       style={{width:screen.PIXEL_30,height:screen.PIXEL_30}}/>
            </View>
            </TouchableWithoutFeedback>
        )
    }

    return (
        <View style={styles.container}>

            <Header title={'Guide'} navigation={navigation}/>

            {
                data && (
                    <ScrollView contentContainerStyle={styles.content}>
                        {
                            data && data.map((item,index)=>{
                                return renderItem(item,index)
                            })
                        }
                    </ScrollView>
                )
            }



        </View>
    )
}

const styles= StyleSheet.create({
    container:{
        flex:1
    },
    content:{
        flex:1,
        paddingHorizontal:screen.PIXEL_40
    }

})
